<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品首页</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="..//css/public.css">
    <link rel="stylesheet" href="..//css/商品首页.css">
    <link rel="stylesheet" href="../../node_modules/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../fonts/font/iconfont.css">
 
    
  
</head>
<body>
      <!-- 黑色导航部分开始 -->
      <div class="header">
        <div class="wrap">
            <ul class="header_left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="https://home.miui.com/">MIUI</a><span>|</span></li>
                <li><a href="https://iot.mi.com/">loT</a><span>|</span></li>
                <li><a href="https://i.mi.com/">云服务</a><span>|</span></li>
                <li><a href="https://airstar.com/home">天星数科</a><span>|</span></li>
                <li><a href="https://www.xiaomiyoupin.com/">有品</a><span>|</span></li>
                <li><a href="https://xiaoai.mi.com/">小爱开放平台</a><span>|</span></li>
                <li><a href="https://qiye.mi.com/">企业团购</a><span>|</span></li>
                <li><a href="https://www.mi.com/aptitude/list?id=88">资质证照</a><span>|</span></li>
                <li><a href="https://www.mi.com/aptitude/list">协议规则</a><span>|</span></li>
                <li><a href="#">下载APP</a><span>|</span></li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">SelectLocation</a><span>|</span></li>
            </ul>
            <ul class="header_right">
                <li><a href="./登录页面.html">登录</a><span>|</span></li>
                <li><a href="./注册页面.html">注册</a><span>|</span></li>
                <li><a href="../views/index.html">返回主页</a><span>|</span></li>
                <li class="cart">
                    <a href="../views/cart.html">
                        <i class="iconfont icon-gouwuche"></i>购物车
                    </a>
                    <!-- <div class="cart_list">购物车中还没有商品，赶紧选购吧</div> -->
                </li>
            </ul>

        </div>
    </div>
    <!-- 黑色导航部分结束 -->
    <div class="nav">
        <div class="wrap">
            <div class="logo">
                <img src="../images/logo-mi2.png">
            </div>
            <div class="nav_bar">
                <ul>
                    <li>
                        <a href="#">Xiaomi手机</a>
                        <div class="nav_bar-list">
                            <div class="wrap">
                                <ul>
                                    <li><a href="#">
                                            <div class="imgbox">
                                                <img src="../images/list.jpg" >

                                            </div>
                                            <p class="name1">xiaomi Civi 1S</p>
                                            <P class="price1">2299元起</P>
                                        </a>
                                    </li>
                                    <!-- <!-- <li><a href="#">
                                        <div class="imgbox">
                                            <img src="../images/list.jpg" >

                                        </div>
                                        <p class="name1">xiaomi Civi 1S</p>
                                        <P class="price1">2299元起</P>
                                    </a> -->
                                <!-- </li> <li><a href="#">
                                    <div class="imgbox">
                                        <img src="../images/list.jpg" >

                                    </div>
                                    <p class="name1">xiaomi Civi 1S</p>
                                    <P class="price1">2299元起</P>
                                </a>
                            </li> <li><a href="#">
                                <div class="imgbox">
                                    <img src="../images/list.jpg" >

                                </div>
                                <p class="name1">xiaomi Civi 1S</p>
                                <P class="price1">2299元起</P>
                            </a>
                        </li> <li><a href="#">
                            <div class="imgbox">
                                <img src="../images/list.jpg" >

                            </div>
                            <p class="name1">xiaomi Civi 1S</p>
                            <P class="price1">2299元起</P>
                        </a>
                    </li> <li><a href="#">
                        <div class="imgbox">
                            <img src="../images/list.jpg" >

                        </div>
                        <p class="name1">xiaomi Civi 1S</p>
                        <P class="price1">2299元起</P>
                    </a>
                </li>
                                </ul>
                            </div> -->
                        </div>
                    </li> 
                    <li><a href="#">Redmi红米</a>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
                <div class="search">
                    <input class="searchInput" type="text">
                    <a href="#" class="iconfont icon-fangdajing"></a>
                    <ul class="displa">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                    </ul>
            </div>
        </div>
    </div>
    <div class="list">
        <div class="list3">
            <ul class="cate">
                <!-- JS 渲染 -->
                <!-- <li class="active"><a href="#">全部</a></li>
                <li><a href="#">手机</a></li>
                 <li><a href="#">手机</a></li>
                 <li><a href="#">手机</a></li>
                 <li><a href="#">手机</a></li>
                <li><a href="#">手机</a></li>
                 <li><a href="#">手机</a></li>
               
            <!-- </ul> -->
            </div>
     
              <!-- 轮播图 -->
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image: url(../images/1.jpg);"></div>
                        <div class="swiper-slide" style="background-image: url(../images/2.jpg);"></div>
                        <div class="swiper-slide" style="background-image: url(../images/3.jpg);"></div>
                        <div class="swiper-slide" style="background-image: url(../images/4.jpg);"></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                    
                </div>
        </div>
              
    <div class="box">
        <div class="item">
            <p>筛选</p>
            <ul class="filter">
                <li data-type="" class="active">全部</li>
                <li data-type="hot">热销</li>
                <li data-type="sale">折扣</li>
            </ul>
        </div>
        <div class="item">
            <p>折扣</p>
            <ul class="sale">
                <li data-type="10" class="active">全部</li>
                <li data-type="5">5</li>
                <li data-type="6">6</li>
                <li data-type="7">7</li>
                <li data-type="8">8</li>
                <li data-type="9">9</li>
            </ul>
        </div>
        <div class="item">
            <p>排序</p>
            <ul class="sort">
                <li data-type="id" data-method="ASC" class="active">综合升序</li>
                <li data-type="id" data-method="DESC">综合降序</li>
                <li data-type="price" data-method="ASC">价格升序</li>
                <li data-type="price" data-method="DESC">价格降序</li>
                <li data-type="sale" data-method="ASC">折扣升序</li>
                <li data-type="sale" data-method="DESC">折扣降序</li>
            </ul>
        </div>
        <!-- <div class="item">
        <p>搜索</p>
        <ul>
            <input class="search" type="text">
        </ul>
    </div> -->
        <div class="item pagination">
            <p>分页</p>
            <div>
                <span class="left disable">&lt;</span>
                <span>1 / 10</span>
                <span class="right">&gt;</span>
            </div>
            <select>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="30">30</option>
            </select>
            <!-- <input type="text" value="1"> -->
            <button>跳转</button>
        </div>
    </div>
    <div class="box2">
        <ul class="content container">
            <!-- <li>
                <div class="show">
                    <img src="" alt="">
                    <span class="hot active">热销</span>
                    <span class="sale active">折扣</span>
                </div>
                <div class="info">
                    <p class="title">sdfkjkhasdfjghsd圣诞节分公司交付给是刚发的古生代够浮点数公费师范广东省分公司的集合返回计算 交互的发过火规范的股份 </p>
                    <p class="price">
                        <span class="current">￥ 100.00</span>
                        <span class="old">￥ 100.00</span>
                    </p>
                    <button>加入购物车</button>
                </div>
            </li> -->
        </ul>

    </div>


    </div>
    </div>

<!-- 底部 -->
<footer>
    <div class="footer_top">
        <div class="footer-service">
            <ul>
                <li><a href="">预约维修服务</a></li>
                <li><a href="">7天无理由退货</a></li>
                <li><a href="">15天免费换货</a></li>
                <li><a href="">满69包邮</a></li>
                <li style="border-right : 0"><a href="">520余家售后网点</a></li>
            </ul>
        </div>
        <div class="footer_clearfix">
            <dl>
                <dt>帮助中心</dt>
                <dd>
                    <a href="">
                        账户管理
                    </a>
                </dd>

                <dd>
                    <a href="">
                        购物指南
                    </a>
                </dd>
                <dd>
                    <a href="">
                        订单操作
                    </a>
                </dd>

            </dl>
            <dl>
                <dt>

                    服务支持

                </dt>
                <dd>
                    <a href="">
                        售后政策
                    </a>
                </dd>
                <dd>
                    <a href="">
                        自助服务
                    </a>
                </dd>
                <dd>
                    <a href="">
                        相关下载
                    </a>
                </dd>

            </dl>
            <dl>
                <dt>

                    线下门店

                </dt>
                <dd>
                    <a href="">
                        小米之家
                    </a>
                </dd>
                <dd>
                    <a href="">
                        服务网点
                    </a>
                </dd>
                <dd>
                    <a href="">
                        授权体验店/专区
                    </a>
                </dd>

            </dl>
            <dl>
                <dt>

                    关于小米

                </dt>
                <dd>
                    <a href="">
                        了解小米
                    </a>
                </dd>
                <dd>
                    <a href="../views/登录页面.html">
                        加入小米
                    </a>
                </dd>
                <dd>
                    <a href="">
                        投资者关系
                    </a>
                </dd>
                <dd>
                    <a href="">
                        企业社会责任
                    </a>
                </dd>
                <dd>
                    <a href="">
                        廉洁举报
                    </a>
                </dd>

            </dl>
            <dl>
                <dt>
                    <a href="">
                        关注我们
                    </a>
                </dt>
                <dd>
                    <a href="">
                        新浪微博
                    </a>
                </dd>
                <dd>
                    <a href="">
                        官方微信
                    </a>
                </dd>
                <dd>
                    <a href="">
                        廉洁举报
                    </a>
                </dd>
                <dd>
                    <a href="">
                        联系我们
                    </a>
                </dd>

            </dl>
            <dl>
                <dt>

                    特色服务

                </dt>
                <dd>
                    <a href="">
                        F码通道
                    </a>
                </dd>
                <dd>
                    <a href="">
                        礼物码
                    </a>
                </dd>
                <dd>
                    <a href="">
                        防伪查询
                    </a>
                </dd>

            </dl>
            <div class="footer_left">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00 (仅收市话费)</p>
                <button>人工客服</button>
                <div class="follow">
                    关注小米:
                    <a href=""><i class="fa fa-weibo" aria-hidden="true"></i></a>
                    <a href=""><i class="fa fa-weixin" aria-hidden="true"></i><img src="img/关注小米二维码.png"
                            alt=""></a>
                </div>
        </div>
    </div>
</div>
<div class="footer_bottom">
<div class="logo" style="width: 56px; height:56px"><img src="../images/logo-mi2.png" ></div>
<div class="info_text">
    <p>
        <a href="">小米商城</a>
        <span>|</span>
        <a href="">MIUI</a>
        <span>|</span>
        <a href="">米家</a>
        <span>|</span>
        <a href="">米聊</a>
        <span>|</span>
        <a href="">多看</a>
        <span>|</span>
        <a href="">游戏</a>
        <span>|</span>
        <a href="">政企服务</a>
        <span>|</span>
        <a href="">小米天猫店</a>
        <span>|</span>
        <a href="">小米集团隐私政策</a>
        <span>|</span>
        <a href="">小米公司儿童信息保护规则</a>
        <span>|</span>
        <a href="">小米商城隐私政策</a>
        <span>|</span>
        <a href="">小米商城用户协议</a>
        <span>|</span>
        <a href="">问题反馈</a><br>
        
        <a href="">北京互联网法院法律服务工作站</a>
        <span>|</span>
        <a href="">中国消费者协会</a>
        <span>|</span>
        <a href="">北京市消费者协会</a>
        <br>
        <a href="">@mi.com</a>
        <span>京ICP证110507号</span>
        <a href="">京ICP备10046444号</a>
        <a href="">京公网安备11010802020134号</a>
        <a href="">京网文[2020]0276-042号</a><br>
        <a href="">(京)网械平台备字（2018）第00005号</a>
        <a href="">互联网药品信息服务资格证(京)-非经营性-2014-0090</a>
        <a href="">营业执照</a>
        <a href="">医疗器械质量公告</a><br>
        <a href="">增值电信业务许可证</a>
        <span>网络食品经营备案</span>
        <span>京食药网食备202010048</span>
        <a href="">食品经营许可证</a><br>
        <span>违法和不良信息举报电话：171-5104-4404</span>
        <a href="">知识产权侵权投诉</a>
        <span>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</span>
    </p>
    <div class="info_links" style="float: left; display: block;">
        <a href=""><img src="../images/footer1.png" alt=""></a>
        <a href=""><img src="../images/footer2.png" alt=""></a>
        <a href=""><img src="../images/footer3.png" alt=""></a>
        <a href=""><img src="../images/footer4.png" alt=""></a>
        <a href=""><img src="../images/footer5.png" alt=""></a>
    </div>
</div>
</div>
</div>
</div>
</footer>
<script src="../../node_modules/swiper/swiper-bundle.min.js"></script>
<script src="../jQuery/jQuery.js"></script>
<script src="../js/no_index.js"></script>
    <script src="../js/gather.js"></script>
    <script src="../js/商品首页.js"></script>
    <script src="../js/LBT.js"></script>


</body>
</html>